<template>
	<div class="admin-auto-table">
		<x-border icon="none" type="accent" v-if="viewModel" class="table-sing_border">
			<zk-single-report :widget="viewModel"></zk-single-report>
		</x-border>
		<x-border ref="xBorder" icon="flaticon-settings" v-if="async">
			<x-table ref="xTable" :type="table.type" @afterTableLoad="afterTableLoad">
			</x-table>
			<div v-if="$ala.filter() === 3" class="derived-box" slot="headerRight">
				<el-popover placement="bottom-end" trigger="hover">
					<div class="derived_popover">
						<ul>
							<li @click="toExcel()">导出表格</li>
						</ul>
					</div>
					<div class="derived-box_btn" slot="reference">
						<i class="el-icon-more-outline"></i>
					</div>
				</el-popover>
			</div>
		</x-border>
	</div>
</template>


<script>
	import ala from 'ala'
	export default {
		props: {
			widget: {},
			title: {}
		},
		data() {
			return {
				reload: true, // 是否刷新
				table: null,
				widgetValue: '',
				viewModel: null,
				async: false
			}
		},
		methods: {
			async init() {
				if (!this.widget.value || !this.widget.value.table) {
					this.$ala.toMessage('类型传入不正确,请重新传入', 'danger')
				}
				this.widgetValue = this.widget.value
				this.table = this.widgetValue.table
				this.async = true
			},
			// 表格加载完成事件
			afterTableLoad(dataResult) {
				if (dataResult.singleReport !== null) {
					var value = {
						value: dataResult.singleReport
					}
					this.viewModel = value
				} else {
					this.viewModel = null
				}
				this.$nextTick(() => {
					dataResult.border.type = this.widget.value.themeColor
					var border = this.$ala.getBorder(dataResult.border, this.widgetValue.table.border)
					this.$refs.xBorder.init(border)
				})
			},
			toExcel() {
				this.$refs.xTable.toExcel()
			},
			// 监听 x-widget值得变化,不能直接监听路由，直接监听路由可能会导致数据延迟
			watchWidget(val) {
				this.init()
				if (this.reload === false) {
					this.$nextTick(() => {
						this.$refs.xTable.init(this.table.type, this.table.columns)
					})
				}
				this.reload = false // 解决刷新浏览器，数据加载两次的问题
			}
		}
	}
</script>
<style rel="stylesheet/scss" lang="scss">
	@import "./index.scss";
</style>